<script setup>
import { onMounted, ref } from "vue";
import { getCarouselAPI } from '@/apis/homeAPI'

const carouselList = ref([]);
const getCarousel = async () =>{
      //业务逻辑

      //调用接口
      const res = await getCarouselAPI();
      carouselList.value = res.data;
}

onMounted(() => {
    getCarousel();
});
</script>
<template>
<div class="home_banner">
  <el-carousel height="500px">
      <!-- 遍历 picList 数组，index 作为唯一 key -->
      <el-carousel-item v-for="(picUrl, index) in carouselList.picList" :key="index">
        <!-- 使用 :src 绑定图片地址，picUrl 就是数组中的图片链接 -->
        <img :src="picUrl" alt="轮播图" />
      </el-carousel-item>
  </el-carousel>
</div>
</template>
<style lang="scss" scoped>
 .home_banner{
    width:1280px;
    height:500px;
    margin:0 auto;
    position: relative;
    top:-500px;
    left:0px;
    z-index: 98;
    img{
      width: 1280px;
      height: 500px;
    }
 }

</style>
